/*
* group-has 父元素group,下子元素兄弟元素控制另一个兄弟元素样式
* group-has-[selecter]:bg-green-500 父元素group,下子元素选中时，兄弟元素添加样式
* */
export default function Page(){
  return (
    <div className={'p-20 bg-indigo-100 group'}>
      <div>
        <input  type="checkbox"/>
      </div>
      <p className={'group-has-[:checked]:bg-green-500'}>千里之行始于足下</p>
      <p>千里之行始于足下</p>
    </div>
  )
}
